<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  height: {
    type: Number,
    default: 60,
  },
  placeholder: {
    type: String,
    default: '请输入旅游景点',
  },
});
const emits = defineEmits(['search', 'select']);

const state = reactive({
  showPicker: false,
});
const columns = [
  { text: '全国', value: 'Hangzhou' },
  { text: '杭州', value: 'Hangzhou' },
  { text: '苏州', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' },
];
const fieldValue = ref('全国');
const value = ref('');

const onConfirm = ({
  selectedOptions,
}: {
  selectedOptions: Array<{ text: string }>;
}) => {
  state.showPicker = false;
  fieldValue.value = selectedOptions[0].text;
  emits('select', selectedOptions[0].text);
};
const searckClick = () => {
  emits('search', value.value);
};
const navigaBack = () => {
  router.go(-1);
};
</script>

<template>
  <div class="body" :style="{ height: `${height}px` }">
    <img
      class="icon_left"
      src="@/assets/icon/plan/arrow_left.svg"
      @click="navigaBack"
    />
    <span class="selected_city" @click="state.showPicker = true">{{
      fieldValue
    }}</span>
    <input v-model="value" :placeholder="placeholder" class="search_input" />
    <span class="search_btn" @click="searckClick">搜索</span>
  </div>
  <van-popup v-model:show="state.showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      @cancel="state.showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>
<style scoped lang="scss">
.body {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 8px 0 4px;
  color: #595959;
  border-radius: 8px;
  box-shadow: 0px 1px 8px 1px #dfdfdf;
  .icon_left {
    width: 25px;
    height: 25px;
  }
  .selected_city {
    padding: 0 14px;
    position: relative;
    flex-shrink: 0;
  }
  .selected_city::after {
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    width: 1px;
    height: 80%;
    background-color: #595959;
    transform: translateY(-50%);
  }
  .search_input {
    flex: 1;
    font-size: 16px;
    border: none;
    outline: none;
    box-shadow: none;
    line-height: 2;
    margin-left: 12px;
  }

  .search_btn {
    padding: 10px 16px;
    background-color: #00bf69;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
  }
}
</style>
